<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>工厂</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<style>
			
            .divTitle li.active{
                color: #327afa;
                border-bottom: 2px #327afa solid;
            }
            .divHeader{
                width:40%;
                margin:0 auto;
            }
            .title{
                width: 100%;
                overflow: hidden;
                background: #fff;
            }
            .ulTitle{
            	padding:0 10px;
            }
            .ulTitle li{
            	/*padding:10px 0;*/
                margin-right:30px;
                float: left;
                font-size: 14px;
            }
            .aui-border-b{
            	overflow: hidden;
				min-height: 45px;
				line-height: 45px;
				padding-left: 10px;
            }
			.aui-title{
				display: static;
				min-height: 45px;
				line-height: 45px;
			}
            .aui-pull-left{
                z-index: 99;
            }
            .aui-icon-left{
                padding-right:30px;
            }
		</style>
	</head>
	<body>
		<header class=" aui-bar-nav ">
			<div class="aui-border-b">
				<div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
				<div class="aui-title">
					工厂
				</div>
			</div>
            
		<div class="title" id="headerTitle">
                <div class="divTitle">
                <!-- 头部分类 -->
                    <ul class="ulTitle aui-border-b" id="Category-content">
                    </ul>
                </div>
            </div>
		</header>
        <script id="Category-template" type="text/x-dot-template">
            {{ for(var i in it) { }}
            <li {{ if(i == 0){ }}class="active"{{ } }} data-id="{{=it[i].catid}}" tapmode onclick="sendcatid(this)">{{=it[i].catname}}</li>
            {{ } }}
        </script>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../script/iscroll.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
            getBrand();   

            var header = $api.dom('header');
            $api.fixIos7Bar(header);
            		
		}
        // 处理热门和动态的切换,同时获取数据
        //type:想要获取数据的类别，obj当前单击的对象
        //type最好直接是分类的id，直接可以获取数据
        function sendcatid(obj){
            changeCheck(obj);
            catid = $(obj).attr("data-id");
            if(catid){
                $('#List-content').empty();
            }
            //监听分类
            api.sendEvent({
                name : 'getcatid',
                extra : {
                    catid : catid
                }
            })
        }
        
        //为了在下面的热门类别可以通用，单独出来
        function changeCheck(obj){
            $(obj).parent().find("li").removeClass("active");
            $(obj).addClass("active");
        }
        $(function(){
            // $(".divTitle").width(setWidth());
            // loadYanse ();
        })
        var myScroll;
        // 头部分类滚动
        function loadYanse () {
            myScroll = new IScroll('#headerTitle', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true ,
            vScroll: false,
            click:true,
            beforeScrollStart: function (e) {
                   if ( this.absDistX > (this.absDistY + 5 ) ) {
                       // user is scrolling the x axis, so prevent the browsers' native scrolling
                       e.preventDefault();
                   }
                }
           });
        }
        // 获取分类要滚动的宽度
        function setWidth(){
            var width=0;
            $(".ulTitle").find("li").each(function(){
                width+=$(this).outerWidth(true);
            }) 
            $(".divTitle").width(width+30);
        }

         //获取头部分类
        function getBrand() {
            var data = {};
            var url = 'factory/index';
            ajaxRequest(url, 'get', data, function (ret, err) {
                if (ret.status == 1) {
                    catid = ret.msg[0].catid;
                    var content = $api.byId('Category-content');
                    var tpl = $api.byId('Category-template').text;
                    var tempFn = doT.template(tpl);
                    $api.html(content, '');
                    $api.prepend(content, tempFn(ret.msg));  
                    openframe(catid);
                } else {
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            })
        }

        function openframe(catid){
            $(".divTitle").width(setWidth()); 
            loadYanse ();
            header = $api.dom('header');
            $api.fixIos7Bar(header);

            header_h = $api.offset(header).h;
            body_h = $api.offset($api.dom('body')).h - header_h;  
            api.openFrame({
                name : 'gongchang_frm',
                url : 'gongchang_frm.html',
                rect : {
                    x : 0,
                    y : header_h,
                    w : 'auto',
                    h : body_h
                },
                pageParam : {
                    catid : catid
                },
                bounces : false,
                vScrollBarEnabled : false,
                hScrollBarEnabled : false
            });
        }
	</script>
</html>
